<template>
  <div class="content">

    <div style='display: flex;height: 100%;'>
      <div style="flex: 1;display: flex;flex-direction: column;">
        <dv-decoration-8 style="width:100%;height:50px;" />
        <dv-border-box-1 style='flex: 1;'>

        </dv-border-box-1>
        <dv-border-box-1 style='flex: 1;'></dv-border-box-1>
        <dv-border-box-1 style='flex: 1;margin-bottom: 0px;'></dv-border-box-1>
      </div>
      <div style="flex: 2;">

        <div
          style="width: 100%;height: 50px;text-align: center;font-size: 30px;height: 50px;font-weight: bold;color: #ffffff;margin-top: 30px;">
          湖南省国内旅游抽样调查大数据平台

        </div>
        <dv-decoration-10 style="width:100%;height:5px;margin-top: 20px;" />
      </div>
      <div style="flex: 1;display: flex;flex-direction: column;">
        <dv-decoration-8 style="width:100%;height:50px;" :reverse="true" />
        <dv-border-box-1 style='flex: 1;'>
          <div
            style="font-size: 22px;font-weight: bold;text-align: center;color: #ffffff;margin-top: 5%;display: flex;">
            <dv-decoration-1 style="width:37.5%;height:20px;" />
            <div style="width: 25%;">
              游客来源
            </div>
            <dv-decoration-1 style="width:37.5%;height:20px;" />
          </div>
          <dv-scroll-board :config="config" style="width:85%;height:70%;margin-top: 3%;margin-left: 8%;" />
        </dv-border-box-1>
        <dv-border-box-1 style='flex: 1;'></dv-border-box-1>
        <dv-border-box-1 style='flex: 1;'></dv-border-box-1>
      </div>

    </div>
    <img src="../../static/lbx.png" style="position: absolute;top: 440px;left: 41%;width: 400px;height: 443px;"
      id="loader" />


    <div style="position: absolute;top: 0;left: 0;width: 100%;height: 90%;display: flex;">
      <div style="flex: 1;display: flex;flex-direction: column;">
        <div style="height: 50px;"></div>
        <div style="flex: 1;position: relative;">
          <div id="myChart1" style="width: 98%;height: 100%;position: absolute;top: 20px;"></div>
        </div>
        <div style="flex: 1;position: relative;">
          <div id="myChart2" style="width: 98%;height: 100%;position: absolute;top: 60px;"></div>
        </div>
        <div style="flex: 1;position: relative;">
          <div id="myChart4" style="width: 100%;height: 100%;position: absolute;top: 80px;"></div>
        </div>
      </div>
      <div style="flex: 2;display: flex;flex-direction: column;position: relative;">
        <el-select v-model="value"  style="position: absolute;right: 0;top: 0;margin-top: 50px;margin-left: 50px;width: 80px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div style="display: flex;">
          <dv-border-box-8 style='margin-top: 100px;height: 100px;padding: 20px;'>
            <div style="display: flex;flex-direction: column;">
            <div style="color: #ffffff;font-size: 18px;width: 200px;">抽样调查总份数：</div>
            <div style="font-size: 36px;font-weight: bold;color: aqua;margin-left: 100px;margin-top: 30px;">100份</div>
            </div>
          </dv-border-box-8>
        <dv-border-box-8 style='margin-top: 100px;height: 100px;padding: 20px;'>
          <div style="display: flex;flex-direction: column;">
          <div style="color: #ffffff;font-size: 18px;width: 200px;">抽样调查总份数：</div>
          <div style="font-size: 36px;font-weight: bold;color: aqua;margin-left: 100px;margin-top: 30px;">100份</div>
          </div>
        </dv-border-box-8>
          <dv-border-box-8 style='margin-top: 100px;height: 100px;padding: 20px;'>
            <div style="display: flex;flex-direction: column;">
            <div style="color: #ffffff;font-size: 18px;width: 200px;">抽样调查总份数：</div>
            <div style="font-size: 36px;font-weight: bold;color: aqua;margin-left: 100px;margin-top: 30px;">100份</div>
            </div>
          </dv-border-box-8>
        </div>
        <div style="width: 100%;height: 100%;margin-top: 5%;" id="myChartMap">

        </div>
      </div>
      <div style="flex: 1;display: flex;flex-direction: column;">
        <div style="height: 50px;"></div>
        <div style="flex: 1;">

        </div>
        <div style="flex: 1;position: relative;">
          <div id="myChart3" style="width: 98%;height: 100%;position: absolute;top: 60px;"></div>
        </div>
        <div style="flex: 1;position: relative;">

          <div id="myChart5" style="width: 100%;height: 100%;position: absolute;top: 80px;" @click="onClick()"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import "echarts/map/js/province/hunan.js";
  import obj from "echarts/map/json/province/hunan.json";
  export default {
    data() {
      return {
        lists: ['2021', '2020'],
        geoCoordMap: {},
        options: [{
          value: '1',
          label: '2021'
        }, {
          value: '2',
          label: '2020'
        }],
        value: '1',
        dataList: [{
            name: '长沙市',
            value: 396
          },
          {
            name: '湘潭市',
            value: 66
          },
          {
            name: '株洲市',
            value: 222
          },
          {
            name: '衡阳市',
            value: 688
          },
          {
            name: '常德市',
            value: 75
          },
          {
            name: '郴州市',
            value: 121
          },
          {
            name: '邵阳市',
            value: 91
          },
          {
            name: '娄底市',
            value: 479
          },
          {
            name: '永州市',
            value: 34
          },
          {
            name: '岳阳市',
            value: 631
          },
          {
            name: '怀化市',
            value: 777
          },
          {
            name: '益阳市',
            value: 988
          },
          {
            name: '张家界市',
            value: 693
          },
          {
            name: '湘西土家族苗族自治州',
            value: 934
          },

        ],
        myChart1: '',
        myChart2: '',
        myChart3: '',
        myChart4: '',
        myChart5: '',
        config1: {
          number: [100],
          content: '{nt}份 '
        },
        listArr: [], //城市json
        max: "", //最大value值
        min: "", // 最小value值
        config: {
          waitTime: 1500,
          align: ['center', 'center', 'center'],
          header: ['列1', '列2', '列3'],

          data: [
            ['行1列1', '行1列2', '行1列3'],
            ['行2列1', '行2列2', '行2列3'],
            ['行3列1', '行3列2', '行3列3'],
            ['行4列1', '行4列2', '行4列3'],
            ['行5列1', '行5列2', '行5列3'],
            ['行6列1', '行6列2', '行6列3'],
            ['行7列1', '行7列2', '行7列3'],
            ['行8列1', '行8列2', '行8列3'],
            ['行9列1', '行9列2', '行9列3'],
            ['行10列1', '行10列2', '行10列3']
          ]
        },
        option: {
          title: {
            text: '世界人口总量',
            x: '2%',
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}

              fontSize: 20,
              color: '#ffffff',

              fontWeight: 'bold',
            },

          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {

                lineStyle: {
                  color: '#3d5269'
                }
              },
              axisLabel: {
                color: '#fff',
                fontSize: 14
              }
            },

          ],
          yAxis: {
            name: "单位:次",
            nameTextStyle: {
              color: '#fff',
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: '#3d5269'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2d3d53'
              }
            },


          },
          series: [{
            name: '直接访问',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: '#5ef3ff',
              }
            },
            data: [10, 52, 200, 334, 390, 330, 220]
          }]

        },


        option2: {
          title: {
            text: '世界人口总量',
            x: '2%',
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}

              fontSize: 20,
              color: '#ffffff',

              fontWeight: 'bold',
            },

          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {

                lineStyle: {
                  color: '#3d5269'
                }
              },
              axisLabel: {
                color: '#fff',
                fontSize: 14
              }
            },

          ],
          yAxis: {
            name: "单位:次",
            nameTextStyle: {
              color: '#fff',
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: '#3d5269'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2d3d53'
              }
            },


          },
          series: [{
            name: '直接访问',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: '#5ef3ff',
              }
            },
            data: [10, 52, 200, 334, 390, 330, 220]
          }]

        },


        option1: {
          title: {
            text: '世界人口总量',
            x: '2%',
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}

              fontSize: 20,
              color: '#ffffff',

              fontWeight: 'bold',
            },

          },
          backgroundColor: 'rgba(0,0,0,0)',
          color: ['#D53A35', '#E98F6F', '#6AB0B8', '#334B5C'],
          legend: {
            x: 'right',
            data: ['旅游运输', '班线运输', '危险品', '普货'],
            textStyle: {
              fontSize: 12, //字体大小
              color: '#ffffff' //字体颜色
            }

          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },

          xAxis: {
            type: 'category',
            name: '日期',
            boundaryGap: false,
            data: ['5.1', '5.2', '5.3', '5.4', '5.5', '5.6', '5.7'],
            axisLine: {

              lineStyle: {
                color: '#3d5269'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14
            }
          },
          yAxis: {
            name: "单位:次",
            nameTextStyle: {
              color: '#fff',
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: '#3d5269'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2d3d53'
              }
            },


          },
          series: [{
              name: '旅游运输',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '班线运输',
              type: 'line',
              stack: '总量',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '危险品',
              type: 'line',
              stack: '总量',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '普货',
              type: 'line',
              stack: '总量',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
          ]
        },

      }
    },
    methods: {
      drawHistogramOther() {
        // 基于准备好的dom，初始化echarts实例

        this.myChart1 = this.$echarts.init(document.getElementById('myChart1'))
        console.log(this.myChart1)
        // 绘制图表
        this.myChart1.setOption(this.option);
      },

      drawLine() {
        // 基于准备好的dom，初始化echarts实例

        this.myChart2 = this.$echarts.init(document.getElementById('myChart2'))
        console.log(this.myChart2)
        // 绘制图表
        this.myChart2.setOption(this.option1);
      },

      drawHistogram() {
        // 基于准备好的dom，初始化echarts实例

        this.myChart3 = this.$echarts.init(document.getElementById('myChart3'))
        console.log(this.myChart3)
        // 绘制图表
        this.myChart3.setOption(this.option2);
      },

      drawCricle() {
        var sData = [{
          name: "大白",
          value: "40000"
        }, {
          name: "长大",
          value: "53000"
        }, {
          name: "杜洛克",
          value: "40000"
        }, {
          name: "约克猪",
          value: "10000"
        }];
        // var legendData1 = ["大白", "长大", "杜洛克", "约克猪"]
        // var legendData2 = ["二元", "三元", "大长","PIC"]

        var legendData1 = [];
        var legendData2 = [];
        for (var i = 0; i < sData.length; i++) {
          var halfLength = Math.ceil(sData.length);
          var itemName = sData[i].name;
          if (i < halfLength) {
            legendData1.push(itemName)
          } else {
            legendData2.push(itemName)
          }
        }
        var colorList = ['#0066FF', '#2E2EE6', '#4400CC', '#00AACC'];
        var option = {
          backgroundColor: 'rgba(0,0,0,0)',
          title: {
            text: '品种',
            x: '45%',
            y: '55%',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item',
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(13,5,30,.6)',
            borderWidth: 1,
            padding: 5,
            formatter: function(parms) {
              var str = parms.marker + "" + parms.data.name + "</br>" +
                "数量：" + parms.data.value + "头</br>" +
                "占比：" + parms.percent + "%";
              return str;
            }
          },
          legend: [{
            type: "scroll",
            x: 'center', //可设定图例在左、右、居中
            y: 'center',
            top: '5%',
            itemGap: 20,

            // bottom:'50%',
            textStyle: {
              color: '#AAAAAA'
            },
            data: legendData1
          }],
          series: [{
            type: 'pie',
            z: 3,
            center: ['50%', '60%'],
            radius: ['30%', '45%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{a|{b}：{d}%}\n{hr|}',
              rich: {
                hr: {
                  backgroundColor: 't',
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12]
                },
                a: {
                  padding: [-30, 15, -20, 15]
                }
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1
                }
              }
            },
            data: sData
          }, {
            name: '第一层环',
            type: 'pie',
            z: 2,
            tooltip: {
              show: false
            },
            center: ['50%', '60%'],
            radius: ['45%', '58%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                shadowBlur: 1,
                shadowColor: 'rgba(53,139,255,.3)',
                color: 'rgba(1,15,80,.95)',
              },
              emphasis: {
                color: 'rgba(1,15,80,.95)',
              }
            },
            label: {
              show: false
            },
            data: [100]
          }, {
            name: '第二层环',
            type: 'pie',
            z: 1,
            tooltip: {
              show: false
            },
            center: ['50%', '60%'],
            radius: ['58%', '76%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                shadowBlur: 1,
                shadowColor: 'rgba(53,139,255,.3)',
                color: 'rgba(0,15,69,.95)',
              },
              emphasis: {
                color: 'rgba(0,15,69,.95)',
              }
            },
            label: {
              show: false
            },
            data: [100]
          }],
        }
        this.myChart4 = this.$echarts.init(document.getElementById('myChart4'))
        console.log(this.myChart4)
        // 绘制图表
        this.myChart4.setOption(option);
      },
      drawCricleOther() {
        var seriesdata1 = [{
          name: '周一',
          value: 50
        }, {
          name: '周二',
          value: 60
        }, {
          name: '周三',
          value: 80
        }];
        var colorList = ['#407AFB', '#1791FF', '#36B0FE', '#6635EF', '#73ACFF', '#41CBAB', '#7BDD43', '#FFC653',
          '#FF6519', '#EE3939', '#FFAFDA', '#00FFFF'
        ]


        var objData = array2obj(seriesdata1, 'name')

        //将合计值转换为数组
        var h = '6725';
        var arr = h.split('');
        var m = '';

        for (var i = 0; i < arr.length; i++) {
          m += "{a|" + arr[i] + "}";
          if (i != arr.length - 1) {
            m += '  '
          }
        };


        var option = {
          backgroundColor: 'rgba(0,0,0,0)',
          grid: {
            "x": "30%",
            "y": "3%",
            "x2": "5%",
            "y2": "5%",
            "borderWidth": 1,
            "borderColor": "#f0f0f0"
          },
          title: [{
            "show": true,
            text: '{a|产品名称}{b|数量}{c|占比}',
            "top": "50%",
            "left": "60%",
            textStyle: {
              rich: {
                a: {
                  align: 'center',
                  fontSize: 14,
                  color: 'rgba(255,255,255,1)',
                  width: 20,
                  padding: [0, 0, 0, 20]
                },
                b: {
                  align: 'center',
                  fontSize: 14,
                  color: 'rgba(255,255,255,1)',
                  width: 5,
                  padding: [0, 0, 0, 50]
                },
                c: {
                  align: 'center',
                  fontSize: 14,
                  color: 'rgba(255,255,255,1)',
                  width: 5,
                  padding: [0, 0, 0, 45]
                }
              }
            }
          }, {
            text: '{b|合计：}' + m,
            left: '50%',
            top: '10%',
            textAlign: 'center',
            textStyle: {
              fontWeight: 'normal',
              fontSize: '24',
              color: '#FFFFFF',
              textAlign: 'center',
              rich: {
                a: {
                  fontSize: '24',
                  fontWeight: 'bold',
                  backgroundColor: 'rgba(56,89,255,0.2)',
                  borderColor: 'rgba(56,211,255,1)',
                  borderWidth: 1,
                  padding: [6, 6, 6, 6],
                  shadowColor: 'rgba(56,211,255,1)',
                  shadowBlur: 3,
                  borderRadius: 3
                },
                b: {
                  fontSize: '24',
                  fontWeight: 'bold',
                  padding: [6, 6, 6, 6],
                  color: '#FFFFFF',
                }
              }
            },
          }],
          "legend": {
            "show": true,
            //icon: 'circle',
            orient: 'vertical',
            top: '60%',
            left: '60%',
            itemGap: 15,
            itemWidth: 15,
            itemHeight: 10,
            data: seriesdata1,
            formatter: function(name) {
              return '{a|' + name + '}{b|' + objData[name].value.toFixed(0) + '}{c|' + Number(10).toLocaleString() +
                '%}'
            },
            textStyle: {
              rich: {
                a: {
                  align: 'center',
                  fontSize: 14,
                  color: 'rgba(255,255,255,1)',
                  width: 20,
                  //fontWeight: 600,
                  padding: [0, 0, 0, 10]
                },
                b: {
                  align: 'center',
                  fontSize: 14,
                  color: 'rgba(255,255,255,1)',
                  width: 5,
                  //fontWeight: 600,
                  padding: [0, 0, 0, 40]
                },
                c: {
                  align: 'center',
                  fontSize: 14,
                  color: 'rgba(255,255,255,1)',
                  width: 5,
                  //fontWeight: 600,
                  padding: [0, 0, 0, 50]
                }
              }
            }
          },
          series: {
            type: 'pie',
            center: ['30%', '70%'],
            radius: ['15%', '30%'],
            clockwise: true,
            //startAngle: 50,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
              normal: {
                color: function(params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            label: {
              show: true,
              position: 'outside',
              formatter: function(data) {
                //console.log('data',data)
                return '\n{icon|}\n' + '{name|' + data.name + "}" + " {value|" + data.value.toFixed(0) + " ," + data
                  .percent.toFixed(0) + "%}";
              },
              //padding: [-40, -90, -20, -80],
              rich: {
                icon: {
                  height: 5,
                  width: 5,
                  lineHeight: 5,
                  //marginBottom: 10,
                  padding: [0, -5],
                  borderRadius: 5,
                  backgroundColor: 't', // 圆点颜色和饼图块状颜色一致
                },
                name: {
                  fontSize: 14,
                  padding: [20, 100, -20, -90],
                  color: '#ffffff'
                },
                value: {
                  fontSize: 14,
                  padding: [20, -90, -20, -100],
                  color: '#ffffff'
                }
              }
            },
            labelLine: {
              show: false,
              normal: {
                length: 10,
                length2: 70,
                align: 'right',
                lineStyle: {
                  width: 1
                }
              }
            },
            "data": seriesdata1,
            "seriesIndex": 0
          }
        };


        function array2obj(array, key) {
          var resObj = {}
          for (var i = 0; i < array.length; i++) {
            resObj[array[i][key]] = array[i]
          }
          return resObj
        };
        this.myChart5 = this.$echarts.init(document.getElementById('myChart5'))
        console.log(this.myChart5)
        // 绘制图表
        this.myChart5.setOption(option);
      },



      DrawMap() {
        let _this = this;
        let myChart8 = this.$echarts.init(document.getElementById("myChartMap"));

        myChart8.setOption({
          visualMap: [{
              min: 0,
              max: 1000,
              show: false,
              realtime: false,
              calculable: false,
              seriesIndex: [0],
              inRange: {
                color: ['rgb(129,211,248)']
              }
            },
            {
              min: 0,
              max: 1000,
              seriesIndex: 1,
              show: true,
              splitNumber: 4,
              right: '2%',
              inRange: {
                color: ['#FF6464', '#FFA85A', '#FFEC6F', '#8BBCFE'].reverse()
              },
              formatter: function(value) {
                console.log(111)
                return ''
              }
            }

          ],
          geo: {
            map: '湖南',
            show: false,
            roam: true,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            }
          },

          series: [{ // 地图块的相关信息
              type: 'map',
              map: '湖南',
              zoom: 1.2,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: 'rgb(0,0,0)'
                  }
                }
              },
              itemStyle: {
                emphasis: {
                  "areaColor": "blue",
                }
              },
              data: _this.dataList
            },
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              symbol: 'pin',
              symbolSize: [40, 40],
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#000',
                    fontSize: 10,
                    fontWeight: 600
                  },
                  formatter(value) {
                    return value.data.value[2]
                  }
                }
              },
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: 'white' // 标志颜色
                }
              },
              zlevel: 6,
              data: _this.convertData(_this.dataList)
            }


          ]
        });
        myChart8.on('click', function(params) {


        });
      },
      onClick(){
        console.log(111)
        this.$router.push({
          name: 'bigFirst',
         });
      },
      getData() {
        var that = this
        // 获取城市名称数据
        if (obj) {
          let arr = obj.features;
          console.log(arr)
          // 循环取出 城市名称和value值
          arr.forEach(item => {
            var name = item.properties.name;
            that.geoCoordMap[name] = item.properties.cp
          })
          console.log(that.geoCoordMap)
        }
      },
      convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = this.geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      },


    },
    created() {
      this.getData();
    },
    mounted: function() {

      this.drawHistogramOther();
      this.drawLine()
      this.drawHistogram()
      this.drawCricle()
      this.drawCricleOther()
      this.DrawMap()
    },
  }
</script>

<style>
  html {
    width: 100%;
    height: 100%;
  }

  body {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .el-input__inner{
    background-color: #000b3b !important;
    border: 1px #000b3b solid;
  }
  .el-select-dropdown{
    background-color: #000b3b !important;
  }
  .el-select-dropdown_item hover{
    background-color: #000b3b !important;

  }

  .list-module {
    max-height: 200px;
    overflow-y: auto;

    li {
      &._self-hide {
        display: none;
      }

      margin-top: 0.4em;
      padding: 0.4em;

      &:hover {
        cursor: pointer;
        color: #fff;
        background: #00a0e9;
      }
    }
  }


  .content {
    background: url(../../static/bg.jpg);
    background-size: 100% 100%;
    width: 100%;
    height: 100%;

  }

  #loader {

    display: block;

    position: relative;

    -webkit-animation: spin 10s linear infinite;

    animation: spin 10s linear infinite;

  }

  @-webkit-keyframes spin {

    0% {

      -webkit-transform: rotate(0deg);

      -ms-transform: rotate(0deg);

      transform: rotate(0deg);

    }

    100% {

      -webkit-transform: rotate(360deg);

      -ms-transform: rotate(360deg);

      transform: rotate(360deg);

    }

  }

  @keyframes spin {

    0% {

      -webkit-transform: rotate(0deg);

      -ms-transform: rotate(0deg);

      transform: rotate(0deg);

    }

    100% {

      -webkit-transform: rotate(360deg);

      -ms-transform: rotate(360deg);

      transform: rotate(360deg);

    }

  }
</style>
